import React, {useState,useEffect} from 'react'
import { Table, Tag, Card,Space,Switch,Button,Modal,Form, Input,Checkbox,DatePicker, TimePicker, Upload, message,Image } from 'antd';
import { goodlist,kdelete,ksearch,edit} from '@/api';
import style from './style.module.css'

//搜索
import { AudioOutlined } from '@ant-design/icons';
//搜索
const { Search } = Input;
const suffix = (
  <AudioOutlined
    style={{
      fontSize: 16,
      color: '#1890ff',
    }}
  />
);
const onSearch = value => console.log(value);
const Home = (props) =>{
  
  //以下点击弹框
  const App = () => {
    const [isModalVisible, setIsModalVisible] = useState(false);
  
    const showModal = () => {
      setIsModalVisible(true);
    };
  
    const handleOk = () => {
      setIsModalVisible(false);
    };
  
    const handleCancel = () => {
      setIsModalVisible(false);
    };
  
    return (
      
      <>
        <Button type="primary" onClick={showModal}>
          Open Modal
        </Button>
        <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <Form.Item
          label="名称"
          name="username"
          rules={[
            {
              required: true,
              message: 'Please input your username!',
            },
          ]}
        >
          <Input />
        </Form.Item>
            {/* 时间范围 */}
        <Form.Item name="range-picker" label="时间范围" {...rangeConfig}>
          {/* 昵称 */}
        <RangePicker />
        {/* 添加图片 */}
        
      </Form.Item>
        </Modal>
      </>
    );
  };
  //以下是时间范围
  const rangeConfig = {
    rules: [
      {
        type: 'array',
        required: true,
        message: 'Please select time!',
      },
    ],
  };
  //昵称
  const { RangePicker } = DatePicker;
  //添加图片
  
  //渲染数据
  const columns = [
    {
      title: '名称',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '秒杀',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '分页图标',
      dataIndex: 'img',
      render:img=> <img style={{width:35,height:35}} src={img} alt="" />
    },
    {
      title: '状态',
      key: 'caozuo',
      
      dataIndex: 'caozuo',
      render: tags => (
        <>
         <Switch defaultChecked onChange={onChange} />
        </>
      ),
    },
    {
      title: '操作时间',
      key: 'caozuo',
      dataIndex: 'caozuo',
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
               <Button onClick={() => { showModal(record) }}>
            编辑
      </Button>
          <Button onClick={() => { del(record.id) }}>删除</Button>
          <Button onClick={()=>{jump(record)}}>添加商品</Button>
        </Space>
      ),
    },
  ];
  function onChange(checked) {
    console.log(`switch to ${checked}`);
  }
  //跳添加商品耳机路由
  const jump=()=>{
      props.history.push('/main/shop')
  }
  //渲染数据列表
  const [shopdata, setshopdata] = useState([])
    useEffect(() => {
        getShopList()
    },[])
    const getShopList = () => {
      goodlist().then(res => {
        console.log(res)
            setshopdata(res.data.results)
        })
    }
    //编辑
    
    const [id, setid] = useState("")
    const [allocation, setallocation] = useState("")
    const [time, settime] = useState("")
    const [img, setimg] = useState('')
    const [introduce, setintroduce] = useState('')
    const [title, settitle] = useState('')
    const [Original, setOriginal] = useState('')
    const [Seconds, setSeconds] = useState('')
    const [limited, setlimited] = useState('')
    const [remain, setremain] = useState('')
    const [watch, setwatch] = useState('')
    const [state, setstate] = useState('')
    const [isModalVisible, setIsModalVisible] = useState(false);
    const showModal = (item) => {
      
      setIsModalVisible(true);
  
      setid(item.id)
      setallocation(item.allocation)
      settime(item.time)
      settitle(item.title)
      setintroduce(item.introduce)
      setOriginal(item.Original)
      setSeconds(item.Seconds)
      setlimited(item.limited)
      setremain(item.remain)
      setwatch(item.watch)
      setremain(item.remain)
      setimg(item.img)
      setstate(item.state)
      console.log(img)
    };
    const handleOk = () => {
      setIsModalVisible(false);
      edit({ id,allocation,time,title,introduce,Original,Seconds,limited,remain,watch,img }).then(res => {
        console.log(res)
        getShopList()
      })
    };
   //删除数据
   const del = (id) => {
    console.log(id)
    kdelete({ id }).then(res => {
        console.log(res)
        getShopList()
    })
    //删除成功提示
    message.success('删除成功！');
}

    //搜索数据
    const sou = (e) => {
      const name = e.target.value
      //判断内容是否为空
      if (e.target.value === "") {
          //空 则 重新渲染
          getShopList()
      } else {
          //不为空就根据姓名进行搜索数据
          ksearch({ name }).then(res => {
              console.log(res)
              setshopdata(res.data.data)
          })
      }
      //打印
      console.log(e.target.value)
  }
     
    return (
      <div className={style.Seckillbox}>
           <div><Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk}>
        <p>id：<Input value={id} onChange={(e)=>{setid(e.target.value)}} /></p>
        <p>砍价图片： <Input value={img} onChange={(e) => { setimg(e.target.value) }} /></p>
        <p>砍价商品名称：<Input value={allocation} onChange={(e) => { setallocation(e.target.value) }} /></p>
        <p>联系电话：<Input value={time} onChange={(e) => { settime(e.target.value) }} /></p>

        <p>限量：<Input value={	title} onChange={(e) => { settitle(e.target.value) }} /></p>
        <p>成功砍价人数：<Input value={	introduce	} onChange={(e) => { setintroduce(e.target.value) }} /></p>
        <p>砍价价格：<Input value={	Original} onChange={(e) => { setOriginal(e.target.value) }} /></p>
        <p>时间：<Input value={Seconds} onChange={(e) => { setSeconds(e.target.value) }} /></p>
        <p>评论：<Input value={limited} onChange={(e) => { setlimited(e.target.value) }} /></p>
        <p>评论：<Input value={remain} onChange={(e) => { setremain(e.target.value) }} /></p>
        <p>评论：<Input value={	watch} onChange={(e) => { setwatch(e.target.value) }} /></p>
        <p>评论：<Input value={state} onChange={(e) => { setstate(e.target.value) }} /></p>
     
      </Modal></div>
        <div className={style.Seckillbheader}>
        
        <Space direction="vertical">
        <Input placeholder="请输入关键字" className="ipt" onChange={(e) => sou(e)} />
     
  </Space>,
        <App />

        </div>
        
        <div className={style.Seckillcontent}>
        <Table columns={columns} dataSource={shopdata} />
        </div>
        
      </div>
    )
}
    
export default Home
